import { useStore } from "@/store";
import { Form, Input } from "antd";
import { useEffect } from "react";

const { TextArea } = Input;

export default function PageSetting() {
  const [form] = Form.useForm()
  const store = useStore()
  const { js, css, title, desc } = store.pageInfo

  const handleChange = () => {
    //更新
    store.setPageInfo(form.getFieldsValue())
    console.log(store.pageInfo)
  }

  useEffect(() => {
    form.setFieldsValue({ js, css, title, desc })
  }, [js, css, title, desc, form])

  return (
    <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ js, css, title, desc }}
      form={form}
    >

      <Form.Item name="title" label="页面标题" rules={[{ required: true, message: '请输入页面标题!' }]}>
        <Input placeholder="请输入标题"></Input>
      </Form.Item>
      <Form.Item name="desc" label="页面描述" >
        <TextArea></TextArea>
      </Form.Item>
      <Form.Item name="css" label="样式代码" >
        <TextArea></TextArea>
      </Form.Item>
      <Form.Item name="js" label="脚本代码" >
        <TextArea></TextArea>
      </Form.Item>

    </Form>
  )
}
